<template>
<div class="view-Var02">
	<div>-------------------- Var02 --------------------</div>
	<el-button @click='fnB1'>11</el-button>
	{{refVal1}}
	<div>-------------------- Var02 --------------------</div>
</div>
</template>  
<script>
import { ref, watch } from 'vue'

export default {
	name: 'Var02',
	setup (props, context) {
		const refVal1 = ref('aaa');
		const fnB1 = () => {
			refVal1.value = 'bbb';
			console.log('fnB1', 11);
		};
		watch(refVal1, (newVal, oldVal) => {
			console.log("新值:", newVal, "老值:", oldVal);
		});
		return {
			refVal1,
			fnB1,
		}
	},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>